<template>
  <div class="header-box" :class="{ inset }">
    <slot name="header">
      <div class="back">
        <div @click="buttonClick('back')">
          <el-icon class="back-icon"><ArrowLeftBold /></el-icon>
          <slot name="prefix"></slot>
          <span v-if="title">{{ title }}</span>
        </div>
        <slot name="suffix"></slot>
      </div>
    </slot>
  </div>
</template>

<script setup>
const Emit = defineEmits(['buttonClick']);
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  // 紧挨着别的元素时，使阴影改到Header内部
  inset: {
    type: Boolean,
    default: false,
  },
});

function buttonClick(prop) {
  Emit('buttonClick', { prop });
}
</script>

<style scoped lang="scss">
.header-box {
  background: #fff;
  height: 40px;
  align-items: center;
  padding-left: 15px;
  display: flex;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  .back {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: Avenir-Medium, Avenir;
    color: #606266;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    .back-icon {
      margin-right: 10px;
      font-size: 14px;
    }
    span {
      font-size: 14px;
      position: relative;
      top: -1px;
    }
  }
}
.inset {
  box-shadow: 0 -1px 2px 1px rgb(0 0 0 / 10%) inset;
}
</style>
